<!-- 项目分佣比例明细 -->
<template>
	<div class="procommisson">
	    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
	    	<el-form-item label="楼盘名称：">
				<el-input placeholder="请输入楼盘名称" size="small" v-model.trim="ruleForm.devName" maxlength="20"></el-input>
	    	</el-form-item>
	    	<el-form-item>
	    		<el-button type="success"  @click="searchList" id="monitorEnter" size="small">查询</el-button>   
	    	</el-form-item>
	    </el-form>

		<el-table :data="tableData" border style="width: 90%">
			<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
			<el-table-column label="项目" prop="devName" align="center"></el-table-column>
			<el-table-column 
			    v-for="(col,idx) in headerlist"
			    :prop="String(col.businessLineId)" :key="idx" :label="col.businessLineName" :formatter="businesshander">
			</el-table-column>
			<el-table-column label="历史版本" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="seehander(scope.row)">查看</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pagebar">
		  <el-pagination
		    background
		    layout="total, sizes, prev, pager, next"
		    :current-page.sync="ruleForm.pageNum"
		    :page-sizes="[10, 20, 30, 40]"
		    :page-size="ruleForm.pageSize"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :total="totalSize">
		  </el-pagination>
		</div>

	</div>
</template>
<script>
    import api from '@/api/apiPath'
	export default {
		name:'subcommissionDetail',
		title:'项目分佣比例管理',
		data () {
			return {
				ruleForm:{
					devName:undefined,
					pageNum: 0,
					pageSize: 10,
					effectiveFlag:1,
					ascFlag:true,
				},
				totalSize:0,
				tableData:[],
				headerlist:[],//动态列表头
			}
		},

		methods:{
			businesshander(row, column, cellValue, index){
				if (cellValue.length>0) {
					let str =""
					cellValue.forEach(item=>{
						str += item.staffName+': '+item.proportion+'\n'
					})
					return str
				}else {
					return '———'
				}
			},
			handleCurrentChange(){
				this.getlist()
			},
			handleSizeChange(val){
				this.ruleForm.pageSize = val
				this.getlist();
			},
			getlist(){
                this.axios.post(api.PROJECTSETTINGDETAIL,this.ruleForm).then((res) => {
					if (res.data.code == 200) {
	                    this.tableData = res.data.data.pageInfo.list
	                    this.headerlist = res.data.data.headerList
	                    this.totalSize = res.data.data.pageInfo.total
               		}
                })
			},
			searchList(){
				this.ruleForm.pageNum = 1
				this.getlist()
			},
			seehander(row){
				this.$router.push({path:'/projectSubCommissionDetailSee',query: {devId: row.devId}})
			},
		},
        activated(){
            this.searchList()
        },
		created(){
			this.getlist()
		}
	}
	

</script>


<style lang="stylus">
	.procommisson .el-table .cell {
	    text-align: center;
	    white-space: pre-line !important;/*保留换行符*/
	}
</style>